<template>
  <div class="navbar">
    <div class="placeholder" />
    <div class="nav-content">
      <div class="nav-button">
        <div v-if="!noBack" class="nav-button-wrapper" @click="back">
          <van-icon name="arrow-left" color="#fff" />
        </div>
      </div>
      <div class="search">
        <van-search
          v-model="inputValue"
          :show-action="showAction"
          placeholder="搜索"
          @search="onSearch"
          :clearable="showAction"
          shape="round"
          background="#3a75c5"
        />       
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { computed, ref } from 'vue'

const props = defineProps<{
  title: string
  noBack?: boolean
}>()

const inputValue = ref('')
const router = useRouter()
const emit = defineEmits(['on-search'])
const showAction = ref(false)
// const isShow = ref(true)
const back = () => {
  router.push('/zone')
  // router.back()
}

const onSearch = () => {
   emit('on-search',inputValue.value)
  // clearInput()
}
const clearInput = () => {
  inputValue.value = ""
}
  //暴露属性和方法
  defineExpose({
    inputValue,
    clearInput
  });
</script>

<style lang="less" scoped>
.navbar {
  background-color: #3a75c5;
  position: relative;
  flex-shrink: 0;
  height: 48px;
  z-index: 2;
  .placeholder {
    height: 0;
    width: 100%;
  }

  .nav-content {
    display: flex;
    height: 48px;
    align-items: center;
    padding: 0px 7px;
    .nav-button {
      width: 40px;
      display: flex;
      flex-shrink: 0;
      .nav-button-wrapper {
        font-size: 15px;
        padding: 10px;
      }
    }
    .title {
      font-size: 17px;
      color: #fff;
      width: 100%;
      padding-right: 90px;
      flex-grow: 1;
      text-align: center;
    }
    .search {
      width:250px;
      // height: 15px;
      // margin-top: -30px;
    }
  }
}
</style>
